<template>
    <div class="manage">
        <el-dialog :title="modalType == 0 ? '新增' : '编辑'" :visible.sync="dialogVisible" width="50%"
            :before-close="handleClose">
            <!-- 表单信息 -->
            <el-form ref="form" :rules="rules" :inline="false" :model="form" size="mini" label-width="80px">
                <el-form-item label="知识名称" prop="name">
                    <el-input clearable placeholder="请输入知识名称" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="知识内容" prop="content">
                    <el-input :rows="2" type="textarea" :autosize="{ minRows: 2 }" clearable placeholder="请输入知识内容"
                        v-model="form.content"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel" size="mini">取消</el-button>
                <el-button type="primary" @click="submit" size="mini">确 定</el-button>
            </span>
        </el-dialog>
        <div class="manage-header">
            <el-button @click="handleAdd" size="mini" type="primary"> +新增知识 </el-button>
            <el-button type="primary" size="mini" @click="getList">查询</el-button>
        </div>
        <div class="common-tabel">
            <el-table stripe height="100%" border :data="tableData" style="width: 100%" v-loading="loading" size="mini">
                <el-table-column prop="name" label="知识名称" align="center">
                </el-table-column>
                <el-table-column prop="content" label="知识内容" align="center">
                </el-table-column>
                <el-table-column prop="created" label="添加时间" align="center">
                </el-table-column>
                <el-table-column prop="updated" label="更新时间" align="center">
                </el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="150px">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import { knowledgeList, knowledgeAdd, knowledgeEdit, knowledgeDelete } from '@/api/knowledge.js';
export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                name: '',
                content: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入知识名称' }
                ],
                content: [
                    { required: true, message: '请输入知识名称' }
                ],
            },
            tableData: [],
            modalType: 0, // 0表示新增的弹窗， 1表示编辑
            search: {
                content: '',
            },
            loading: false,

        }
    },
    methods: {
        // 提交表单
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let api = this.modalType === 0 ? knowledgeAdd : knowledgeEdit;
                    api(this.form).then(({ code }) => {
                        if (code == 0) {
                            // 清空表单数据
                            this.$refs.form.resetFields()
                            // 关闭弹窗
                            this.dialogVisible = false
                            // 重新获取列表接口
                            this.getList()
                        };
                    })
                }
            })
        },
        // 弹窗关闭
        handleClose() {
            this.$refs.form.resetFields()
            this.dialogVisible = false
        },
        cancel() {
            this.handleClose()
        },
        handleEdit(row) {
            this.modalType = 1
            this.dialogVisible = true
            this.form = JSON.parse(JSON.stringify(row))
        },
        handleDelete(row) {
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                knowledgeDelete({ id: row.id }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList()
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 新增知识
        handleAdd() {
            this.modalType = 0;
            this.dialogVisible = true;
        },
        // 获取列表
        getList() {
            this.loading = true;
            knowledgeList({ content: this.search.content }).then((data) => {
                this.tableData = data.result
                this.loading = false;
            })
        },
    },
    mounted() {
        this.getList()
    }
}
</script>
<style lang="less" scoped>
.manage {
    height: 100%;

    .manage-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .el-form-item {
            margin-bottom: 0;
        }

        /deep/.el-form-item__content {
            line-height: 0;
        }
    }

    .common-tabel {
        position: relative;
        height: calc(100% - 62px);
        background-color: red;
    }
}
</style>